<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="plujins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .container-fluid{
            background-color: pink;
            height: 200px;
        }
    </style>
    <title>导航栏</title>
</head>
<body>

<div class="container">
    <h2>标签型</h2>
    <ul class="nav nav-tabs">
        <li  class="active"><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
    </ul>
    <h2>胶囊型</h2>
    <ul class="nav nav-pills">
        <li  class="active"><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
    </ul>
    <h2>队列型</h2>
    <ul class="nav nav-stacked">
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
    </ul>
    <h2>面包屑型</h2>
    <ul class="breadcrumb">
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
    </ul>
    <h2>分页</h2>
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li  class="active" ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
        <li ><a href="#">首页 </a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    <h2>翻页</h2>
    <ul class="pager">
        <li><a href="#">上一页</a></li>

        <li><a href="#">下一页</a></li>
    </ul>

</div>
</body>
<script src="js/jquery-3.2.js"></script>
<script src="plujins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>